<template>
  <div>
    <Echart
      :options="options"
      id="declareMap"
      height="620px"
      width="100%"
      :eventList="[{ type: 'click', callback: handlerMapClick },{
        type: 'georoam', callback: handlerGeoroam
      }]"
    ></Echart>
  </div>
</template>

<script>
import ChinaJson from "@/common/echart/China.json";
import Echart from "@/common/echart";
import { numConversion } from "@/common/utils";
export default {
  data() {
    return {
      options: {},
      lastArea: null,
      chartInstance: null,
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        console.log(newData);

        this.options = {
          tooltip: {
            trigger: "item", //mousemove、click
            position: function(point) {
              // 固定在顶部
              return [point[0] - 75, point[1] - 120];
            },
            padding: 0,
            borderWidth: 1,
            borderColor: "#409eff",
            backgroundColor: "rgba(6, 75, 199, 0.8)",
            textStyle: {
              color: "#000000",
              fontSize: 13,
            },
            formatter: function(e) {
              let data = e.data;
              if (!data) {
                return;
              }
              const obj = numConversion({
                numString: data.value || 0,
                unit: "万",
              });

              let context = `
                <div style="background:#061534;color:white;width:180;height:103px;padding-top:5px">
                  <div style="margin:10px;background-image: linear-gradient(270deg, rgba(75,51,170,0.00) 0%, #00D8FF 72%, rgba(30,28,127,1.00) 100%);width:150px">${data.name}</div>
                  <p style="color:rgba(255,255,255,0.8);margin:0 10px">
                    <span style="line-height:20px">申报人数 </span><br>
                    <span style="color:#00D8FF;font-size:20px;font-weight:700;line-height:30px;">${obj.value}<span style="font-size:12px">万人</span>
                      </span>
                    </p><p>
                  </p>
                </div>
              `;
              return context;
            },
          },
          visualMap: {
            bottom: 10,
            left: 10,
            type: "piecewise",
            textStyle: {
              color: "#fff",
            },
            pieces: [
              {
                gte: 1000000,
                label: "100万以上",
                color: "#002e33",
              },
              {
                lt: 1000000,
                gte: 900000,
                label: "90~100万",
                color: "#006d75",
              },
              {
                lt: 900000,
                gte: 800000,
                label: "80~90万",
                color: "#12a8a8",
              },
              {
                lt: 800000,
                gte: 700000,
                label: "70~80万",
                color: "#36cfc9",
              },
              {
                lt: 700000,
                gte: 600000,
                label: "60~70万",
                color: "#87e8de",
              },
              {
                lt: 600000,
                gte: 500000,
                label: "50~60万",
                color: "#b5f5ec",
              },
              {
                lt: 500000,
                gte: 400000,
                label: "40~50万",
                color: "#003a8c",
              },
              {
                lt: 400000,
                gte: 300000,
                label: "30~40万",
                color: "#096dd9",
              },
              {
                lt: 300000,
                gte: 200000,
                label: "20~30万",
                color: "#69c0ff",
              },
              {
                lt: 200000,
                gte: 100000,
                label: "10~20万",
                color: "#bae7ff",
              },
              {
                lt: 100000,
                label: "10万以下",
                color: "#e6f7ff",
              },
            ],
          },
          geo: {
            map: "china",
            scaleLimit: {
              min: 1,
              max: 20,
            },
            aspectScale: 0.75,
            zoom: 1,
            roam: "scale",
            top: 40,
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              borderColor: "#9ebaf8",
              borderWidth: 2,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#1184ba",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 4,
                borderColor: "#18ce6c",
              },
              label: {
                show: false,
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  opacity: 0,
                },
              },
            ],
          },
          series: [
            {
              name: "年度汇算",
              type: "map",
              mapType: "中国",
              geoIndex: 0,
              data: [
                // {
                //   name: "南海诸岛",
                //   value: 0,
                // },
                {
                  name: "杭州市",
                  value: 5420,
                },
                {
                  name: "北京市",
                  value: 542320,
                },
                {
                  name: "天津市",
                  value: 123230,
                },
                {
                  name: "上海市",
                  value: 4323200,
                },
                {
                  name: "重庆市",
                  value: 752320,
                },
                {
                  name: "河北省",
                  value: 130323,
                },
                {
                  name: "河南省",
                  value: 830,
                },
                {
                  name: "云南省",
                  value: 110,
                },
                {
                  name: "辽宁省",
                  value: 12329,
                },
                {
                  name: "黑龙江省",
                  value: 150,
                },
                {
                  name: "湖南省",
                  value: 690,
                },
                {
                  name: "安徽省",
                  value: 60,
                },
                {
                  name: "山东省",
                  value: 232232,
                },
                {
                  name: "新疆维吾尔自治区",
                  value: 4,
                },
                {
                  name: "江苏省",
                  value: 31,
                },
                {
                  name: "浙江省",
                  value: 123254,
                },
                {
                  name: "江西省",
                  value: 323236,
                },
                {
                  name: "湖北省",
                  value: 523232,
                },
                {
                  name: "广西壮族自治区",
                  value: 33,
                },
                {
                  name: "甘肃省",
                  value: 7,
                },
                {
                  name: "山西省",
                  value: 5,
                },
                {
                  name: "内蒙古自治区",
                  value: 778,
                },
                {
                  name: "陕西省",
                  value: 22,
                },
                {
                  name: "吉林省",
                  value: 4,
                },
                {
                  name: "福建省",
                  value: 18,
                },
                {
                  name: "贵州省",
                  value: 5,
                },
                {
                  name: "广东省",
                  value: 98,
                },
                {
                  name: "青海省",
                  value: 1,
                },
                {
                  name: "西藏自治区",
                  value: 0,
                },
                {
                  name: "四川省",
                  value: 44,
                },
                {
                  name: "宁夏回族自治区",
                  value: 4,
                },
                {
                  name: "海南省",
                  value: 22,
                },
                {
                  name: "台湾省",
                  value: 3,
                },
                {
                  name: "香港特别行政区",
                  value: 5232334,
                },
                {
                  name: "澳门特别行政区",
                  value: 5524245,
                },
              ],
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getCoordCenter(areaName) {
      return ChinaJson.features.find(
        (item) => item.properties.name === areaName
      );
    },
    handlerMapClick(params) {
      let mapJson = "";
      try {
        mapJson = require(`@/common/map/province/${params.name}.json`);
      } catch (error) {
        console.log(error);
        return;
      }
      this.$echarts.registerMap(params.name, mapJson);
      console.log(params, ChinaJson, "params");
      // 获取当前点击区域的信息
      const currentArea = this.getCoordCenter(params.name);
      console.log(currentArea);
      const opt = {
        geo: {
          zoom: 1,
          map: params.name,
        },
      };
      this.chartInstance.dispatchAction({
        type: 'restore'
      })
      this.chartInstance.setOption(opt);
      // chartInstance.on(
      //   "mouseover",
      //   debounce((args) => {
      //     // 获取当前鼠标所在区域的信息
      //     const currentArea = this.getCoordCenter(args.name);
      //     chartInstance.setOption({
      //       geo: {
      //         center: currentArea.properties.center,
      //       },
      //     });
      //   }, 500)
      // );
    },
    handlerGeoroam(params) {
      console.log(params, 'handlerGeoroam');
      if (params.dx && params.dy) {
        return;
      }
      let opt = {};
      if (params.zoom <= 1) {
        // this.chartInstance.dispatchAction({
        //   type: 'restore'
        // })
        console.log();
      } else {
        opt = {
          geo: {
            roam: true,
          }
        }
        this.chartInstance.setOption(opt);
      }
      
      console.log(params, 'zoom');
    }
  },
  mounted() {
    this.chartInstance = this.$echarts.getInstanceByDom(
      document.getElementById("declareMap")
    );
  },
};
</script>
<style lang="scss" scoped>
.backBtn {
  width: 80px;
  height: 27px;
  line-height: 26px;
  color: #00d8ff;
  border: 1px solid #00a5ffcc;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(0, 29, 77, 0.2);
  cursor: pointer;
  .leftArrow {
    float: left;
    margin-right: 2px;
  }
  .text {
    margin-left: -8px;
  }
  &:hover {
    background: rgba(0, 29, 77, 0.8);
  }
}
</style>
